<template>
  <div class="scroll-wrapper">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
       <van-list
         v-model="loading"
         :finished="finished"
         finished-text="没有更多了"
         @load="onLoad">
          <van-cell v-for="item in articleList" :key="item.art_id.toString()" :title="item.title">
            <div slot="label">
             <!-- 图片 当前文章有几张图 就用几个宫格 -->
             <van-grid :column-num="item.cover.images.length">
               <van-grid-item v-for="(img, idx) in item.cover.images" :key="idx">
                 <van-image :src="img" lazy-load/>
               </van-grid-item>
             </van-grid>
             <!-- 文字说明 -->
              <div class="meta">
                <span>{{ item.aut_name }}</span>
                <span>{{ item.comm_count }}评论</span>
              <!-- 处理相对时间 -->
                <span>{{ _formatDate(item.pubdate )}}</span>
               <!-- 叉号布局 -->
                <span class="close">
                  <van-icon name="cross" @click.stop="showAction(item)"></van-icon>
                </span>

              </div>
            </div>
          </van-cell>
        </van-list>
          <!-- get-container="body"
          表示将弹框渲染到body下 -->
        <van-popup
           v-model="showMoreAction"
           :style="{ width: '80%' }"
           get-container="body"
            @close="actionClose"
            >
     <!--这里将来放置更多组件 -->
           <more-action
            @dis-like="hDisLike"
            @report="hReport"
            ref="moreAction"
           >
           </more-action>
        </van-popup>
   </van-pull-refresh>
  </div>

</template>

<script>
import { getArticles, dislikeArticle, reportArticle } from '@/api/article'
import { relativeTime } from '@/utils/formatDate'
import MoreAction from './MoreAction'
export default {
  props: {
    MyChannel: {
      type: Object
    }
  },
  components: {
    MoreAction
  },
  data () {
    return {
      isLoading: false, // 是否正在下拉刷新请求数据 一旦触发下拉加载自动变为true
      loading: false, // 加载数据状态,加载中变为true
      finished: false, // 是否全部加载完毕 没有数据时手动设置为true
      articleList: [], // 文章类表
      showMoreAction: false, // 弹框是否显示
      curActicleId: null // 暂存id
    }
  },
  mounted () {
    this.loadArticles()
  },
  methods: {
    loadArticles () {
      getArticles(this.MyChannel.id, new Date().getTime()).then(res => {
        const newList = res.data.data.results
        // 后端没有数据返回 彻底结束上拉加载
        if (newList.length === 0) {
          this.finished = true
        }
        // 将新数据push到老数据的尾部
        this.articleList = [...this.articleList, ...newList]

        // 通知组件加载数据完毕 可以进行下一次load事件触发
        this.loading = false
      })
    },
    // 当满足上拉加载条件时自动触发Load事件,从而执行onLoad方法
    onLoad () {
      console.log('开始加载')
      this.loadArticles()
    },
    onRefresh () {
      console.log('下拉加载')
      getArticles(this.MyChannel.id, new Date().getTime()).then(res => {
        // 1. 将新数据添加上老数据的顶部
        const newList = res.data.data.results
        this.articleList = [...newList, ...this.articleList]
        // 2. 提示用户新加载了多少条数据
        this.$toast.success(`成功刷新${newList.length}条数据`)
        // 3. 把isloading手动设置为false 通知组件可以进行下一次下拉加载了
        this.isLoading = false
      })
    },
    // 时间处理
    _formatDate (val) {
      return relativeTime(val)
    },
    // x号点击事件
    showAction (item) {
      // 显示弹框
      this.showMoreAction = true
      console.log(item)
      // 暂存id
      this.curActicleId = item.art_id.toString()
    },
    // 不感兴趣
    hDisLike () {
      // 1.调用接口
      dislikeArticle(this.curActicleId).then(res => {
        // 2.关闭弹框
        this.showMoreAction = false
        // 3.删除本地数据
        this.articleList.forEach((item, index) => {
          if (item.art_id.toString() === this.curActicleId) {
            this.articleList.splice(index, 1)
          }
        })
      })
    },
    // 反馈操作
    hReport (type) {
      // 1.调用接口
      console.log('反馈开始')
      reportArticle(this.curActicleId, type).then(res => {

      })
      // 2.关闭弹框
      this.showMoreAction = false
      // 3.删除本地数据
      this.articleList.forEach((item, index) => {
        if (item.art_id.toString() === this.curActicleId) {
          this.articleList.splice(index, 1)
        }
      })
    },
    actionClose () {
      console.log('关闭')
      // 把MoreAction中的isReport重置为false
      console.log(this.$refs.moreAction)
      this.$refs.moreAction.isReport = false
    }
  }
}
</script>

<style lang="less" scoped>
meta {
  display: flex;
  span {
    margin-right: 10px;
  }
  .close{
    // 让它在最右边
    // 它的父级容器是flex的，给当前元素设置左外边距为auto，会让这个元素在父级容器
    // 的最右边
    margin-left:auto;
  }
}
</style>
